import React from "react";
import { Card, Col, Row , Image } from 'antd';
import axios from 'axios';
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Breadcrumb } from 'antd';
const CoursePage = () => {
  const [data, setData] = useState([]);
  const navigate = useNavigate()

  useEffect(() => {
    const teacherid = localStorage.getItem('teacherid');
    axios.post('http://localhost:8000/gettakecourse', { teacherid: teacherid })
      .then(response => {
        console.log(response.data);
        setData(response.data);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }, []);

  const handleCardClick = (id) => {
    console.log("Clicked on course with id:", id);
    navigate(`/Layoutteacher/course/${id}`);
  };

  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>Course</Breadcrumb.Item>
      </Breadcrumb>
    <h1>Course Page</h1>
    <Row gutter={[16, 16]}>
      {data.length > 0 &&
        data.map(course => (
          <Col span={8} key={course.courseid}>
            <Card
              title={course.coursename}
              hoverable
              onClick={() => handleCardClick(course.courseid)}
            >
              {course.img ? 
                <img src={`http://localhost:8000/${course.img}`} alt="Course Image" style={{ width: '100%', height: '150px', objectFit: 'cover' }} /> :
                <img src="http://localhost:8000/class/669ca80d6a0c5f74835bb936a41aabca.jpg" alt="Default Course Image" style={{ width: '100%', height: '150px', objectFit: 'cover' }} />
              }
              <p>{course.description}</p>
            </Card>
          </Col>
        ))
      }
    </Row>
  </div>
  );
}

export default CoursePage;